<template>
  <div>
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->

      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <j-dict-select-tag v-model="queryParam.gradeId" placeholder="请选择年级" style="width: 100px"
                           dictCode="cou_grade,grade_name,id" @change="getClassByGradeId" />

        <a-select placeholder="选择班级" style="width: 150px" v-model="queryParam.classId" @change="getTargetByClassId">
          <template v-slot:label>
            <p style="width: 100%; margin: 0; text-align: center">选择班级</p>
          </template>
          <a-select-option v-for="item in classList" :key="item.value">{{ item.label }}</a-select-option>
        </a-select>


        <a-button @click="handleCleanSearch" type="primary" icon="setting">重置搜索条件</a-button>
        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
        <!--      <a-button type="primary" icon="download" @click="handleExportXls('cou_course_schedule')">导出</a-button>-->
        <!--      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"-->
        <!--                @change="handleImportExcel">-->
        <!--        <a-button type="primary" icon="import">导入</a-button>-->
        <!--      </a-upload>-->
        <!-- 高级查询区域 -->
        <j-super-query :fieldList="superFieldList" ref="superQueryModal"
                       @handleSuperQuery="handleSuperQuery"></j-super-query>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="batchDel">
              <a-icon type="delete" />
              删除
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"> 批量操作
            <a-icon type="down" />
          </a-button>
        </a-dropdown>
        <template>
        <span style="float:right;">
          <a @click="searchQuery()"><a-icon type="sync" />刷新</a>
          <a-divider type="vertical" />
          <a-button v-print="'#datatable'" ghost type="primary">打印</a-button>
        </span>
        </template>
      </div>

      <!-- table区域-begin -->
      <div>
        <a-table
          size="middle"
          :scroll="{x:true}"
          bordered
          :columns="columns"
          :data-source="dataSource"
          :expandedRowKeys="expandedRowKeys"
          @expand="fatherExpand"
          :pagination="ipagination"
          ref="table"
          class="components-table-demo-nested"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          :rowKey="record=>record.id"
          @change="handleTableChange">
          <a slot="operation" slot-scope="text">Publish</a>
          <a-table
            slot="expandedRowRender"
            slot-scope="record"
            :columns="innerColumns"
            :data-source="innerData"
            :pagination="false"
            class="components-table-demo-nested"
            bordered>
          <span slot="action" slot-scope="text, record">
            <a @click="editScheduleAtom(record)">编辑</a>
          </span>
          </a-table>
        </a-table>
      </div>
      <cou-course-schedule-modal ref="modalForm" @ok="modalFormOk"></cou-course-schedule-modal>
    </a-card>
    <div>
      <a-modal
        title="Title"
        :visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <!--        <a-form-model :model="editModel">-->
        <!--          <a-form-model-item label="Activity name">-->
        <!--            <a-input v-model="editModel.name" />-->
        <!--          </a-form-model-item>-->
        <!--        </a-form-model>-->

        <a-row>
          <!--          <a-col :span="24">-->
          <!--            <a-form-model-item label="课表id" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="courseScheduleId">-->
          <!--              <a-input v-model="editModel.courseScheduleId" placeholder="请输入课表id"  ></a-input>-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
          <a-col :span="24">
            <a-form-model-item label="星期一" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="courScheAtomMonday">
              <a-select v-model="editModel.courScheAtomMonday" placeholder="请选择教师"
                        :getPopupContainer="(target) => target.parentNode" style='width: 200px;'>
                <a-select-option v-for="item in subjectList" :key="item.value.toString()"  style='width: 200px;'>{{ item.label }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="星期二" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="courScheAtomTuesday">
              <a-select v-model="editModel.courScheAtomTuesday" placeholder="请选择教师"
                        :getPopupContainer="(target) => target.parentNode" style='width: 200px;'>
                <a-select-option v-for="item in subjectList" :key="item.value" style='width: 200px;'>{{ item.label }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="星期三" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="courScheAtomWednesday">
              <a-select v-model="editModel.courScheAtomWednesday" placeholder="请选择教师"
                        :getPopupContainer="(target) => target.parentNode" style='width: 200px;'>
                <a-select-option v-for="item in subjectList" :key="item.value" style='width: 200px;'>{{ item.label }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="星期四" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="courScheAtomThursday">
              <a-select v-model="editModel.courScheAtomThursday" placeholder="请选择教师"
                        :getPopupContainer="(target) => target.parentNode" style='width: 200px;'>
                <a-select-option v-for="item in subjectList" :key="item.value" style='width: 200px;'>{{ item.label }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="星期五" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="courScheAtomFriday">
              <a-select v-model="editModel.courScheAtomFriday" placeholder="请选择教师"
                        :getPopupContainer="(target) => target.parentNode" style='width: 200px;'>
                <a-select-option v-for="item in subjectList" :key="item.value" style='width: 200px;'>{{ item.label }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="星期六" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="courScheAtomSaturday">
              <a-select v-model="editModel.courScheAtomSaturday" placeholder="请选择教师"
                        :getPopupContainer="(target) => target.parentNode" style='width: 200px;'>
                <a-select-option v-for="item in subjectList" :key="item.value" style='width: 200px;'>{{ item.label }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="星期日" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="courScheAtomSunday">
              <a-select v-model="editModel.courScheAtomWednesday" placeholder="请选择教师"
                        :getPopupContainer="(target) => target.parentNode" style='width: 200px;'>
                <a-select-option v-for="item in subjectList" :key="item.value" style='width: 200px;'>{{ item.label }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <!--          <a-col :span="24">-->
          <!--            <a-form-model-item label="节次" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="courScheAtomSection">-->
          <!--              <a-input-number v-model="editModel.courScheAtomSection" placeholder="请输入节次" style="width: 100%" />-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
        </a-row>


      </a-modal>
    </div>
  </div>


</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import CouCourseScheduleModal from './modules/CouCourseScheduleModal'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { getAction, putAction } from '@/api/manage'
// import { Cascader } from 'antd';
export default {
  name: 'CouCourseScheduleList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    CouCourseScheduleModal
  },
  data() {
    return {
      description: 'cou_course_schedule管理页面',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '课表编码',
          align: 'center',
          dataIndex: 'courseScheduleCode'
        },
        {
          title: '课表名称',
          align: 'center',
          dataIndex: 'courseScheduleName'
        },
        {
          title: '课表应用对象类型',
          align: 'center',
          dataIndex: 'courseScheduleTtype_dictText'
        },
        // {
        //   title: '目标对象',
        //   align: 'center',
        //   dataIndex: 'targetObjId_dictText'
        // },
        {
          title: '单双周标识',
          align: 'center',
          dataIndex: 'courseScheduleIzSingle_dictText'
        },
        {
          title: '课表状态',
          align: 'center',
          dataIndex: 'courseScheduleStatus_dictText'
        },
        {
          title: '是否启用',
          align: 'center',
          dataIndex: 'izOpen_dictText'
        }
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align: 'center',
        //   fixed: 'right',
        //   width: 147,
        //   scopedSlots: { customRender: 'action' }
        // }
      ],
      visible: false,
      innerColumns: [
        {
          title: '#',
          dataIndex: 'courScheAtomSection',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          sortDirections: ['descend', 'ascend'],
          defaultSortOrder: 'ascend',
          sorter: (a, b) => a.courScheAtomSection - b.courScheAtomSection
        },
        {
          title: '开始时间',
          align: 'center',
          dataIndex: 'courScheAtomStartTime'
        },
        {
          title: '结束时间',
          align: 'center',
          dataIndex: 'courScheAtomEndTime'
        },
        {
          title: '星期一',
          align: 'center',
          dataIndex: 'courScheAtomMonday',
          copedSlots: { customRender: 'tdSlot173' },
          customCell: this.onHandleCellClick
        },
        {
          title: '星期二',
          align: 'center',
          dataIndex: 'courScheAtomTuesday',
          customCell: this.onHandleCellClick
        },
        {
          title: '星期三',
          align: 'center',
          dataIndex: 'courScheAtomWednesday'
        },
        {
          title: '星期四',
          align: 'center',
          dataIndex: 'courScheAtomThursday'
        },
        {
          title: '星期五',
          align: 'center',
          dataIndex: 'courScheAtomFriday'
        },
        {
          title: '星期六',
          align: 'center',
          dataIndex: 'courScheAtomSaturday'
        },
        {
          title: '星期日',
          align: 'center',
          dataIndex: 'courScheAtomSunday'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/coucourseschedule/couCourseSchedule/list',
        delete: '/coucourseschedule/couCourseSchedule/delete',
        deleteBatch: '/coucourseschedule/couCourseSchedule/deleteBatch',
        exportXlsUrl: '/coucourseschedule/couCourseSchedule/exportXls',
        importExcelUrl: 'coucourseschedule/couCourseSchedule/importExcel',
        queryClassUrl: '/classes/couClass/queryByGradeId',
        queryListByClassIdUrl: '/coucourseschedule/couCourseSchedule/queryByClassId',
        atomList: 'coursecheduleatom/couCourseScheduleAtom/queryByScheduleId',
        queryByScheduleId: '/courschetemplateatom/couCourScheTemplateAtom/queryTargetIdByScheduleId',
        editAtomUrl: '/courschetemplateatom/couCourScheTemplateAtom/editSelectById'
      },
      dictOptions: {},
      superFieldList: [],
      queryParam: {},
      classList: [],
      innerData: [],
      expandedRowKeys: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      editModel: {
        id: '',
        courScheAtomFriday: '',
        courScheAtomIzSingle: '',
        courScheAtomMonday: '',
        courScheAtomSaturday: '',
        courScheAtomSection: '',
        courScheAtomStartTime: '',
        courScheAtomSunday: '',
        courScheAtomThursday: '',
        courScheAtomTuesday: '',
        courScheAtomWednesday: ''
      },
      subjectList: []
    }
  },
  created() {
    this.getSuperFieldList()
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    initDictConfig() {
    },
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({ type: 'string', value: 'courseScheduleCode', text: '课表编码', dictCode: '' })
      fieldList.push({ type: 'string', value: 'courseScheduleName', text: '课表名称', dictCode: '' })
      fieldList.push({
        type: 'int',
        value: 'courseScheduleTtype',
        text: '课表类型课表应用对象类型',
        dictCode: 'course_target_obj_ttype'
      })
      fieldList.push({
        type: 'string',
        value: 'targetObjId',
        text: '目标对象id，表示该课表应用对象',
        dictCode: ''
      })
      fieldList.push({
        type: 'int',
        value: 'courseScheduleIzSingle',
        text: '单双周标识',
        dictCode: 'common_iz_single'
      })
      fieldList.push({
        type: 'string',
        value: 'courseScheduleStatus',
        text: '课表状态：',
        dictCode: 'course_arrange_status'
      })
      fieldList.push({ type: 'int', value: 'izOpen', text: '是否启用（0否停用，1是启用）', dictCode: 'iz_open' })
      this.superFieldList = fieldList
    },
    getClassByGradeId() {
      getAction(this.url.queryClassUrl, this.queryParam).then(res => {
        if (res.success) {
          this.classList = []
          res.result.forEach(item => {
            this.classList.push({
              label: item.className,
              value: item.id
            })
          })
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getTargetByClassId() {
      getAction(this.url.queryListByClassIdUrl, this.queryParam).then(res => {
        if (res.success) {
          this.dataSource = res.result
        } else {
          this.$message.error(res.message)
        }
      })
    },
    customExpandIcon(props) {
      // console.log(props)
    },
    fatherExpand(expanded, record) {
      if (expanded) {
        this.expandedRowKeys.push(record.id)
        this.getChildTable(record)
      } else {
        this.expandedRowKeys.splice(this.expandedRowKeys.indexOf(record.id), 1)
      }
    },
    getChildTable(record) {
      let params = {
        scheduleId: record.id
      }
      getAction(this.url.atomList, params).then(res => {
        if (res.success) {
          this.innerData = res.result
          // this.dataSource[record.id].innerData = res.result
          // console.log(this.dataSource.innerData)
        }else {
          this.$message.error(res.message)
        }
      })
    },
    handleCleanSearch() {
      this.queryParam.gradeId = ''
      this.queryParam.classId = ''
      this.loadData()
    },
    onHandleCellClick(record) {
      return {
        on: {
          mouseenter: (event) => {
            record.setExecutorVisible = true
          },
          click: (event) => {
            record.setExecutorVisible = true
          }
        },
        style: record.setExecutorVisible ? {
          'background-color': '#D3EEF9'
        } : {}

      }
    },
    editScheduleAtom(record) {
      this.visible = true
      this.editModel = record
      let params = {
        scheduleId: record.id
      }
      getAction(this.url.queryByScheduleId, params).then(res => {
        if (res.success) {
          this.subjectList = []
          res.result.forEach(item => {
            this.subjectList.push({
              label: item.subjectName,
              value: item.id
            })
          })
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      // console.log(this.editModel)
      // let objIds = ''
      // if (this.editModel.courScheAtomMonday.length > 1){
      //   objIds = this.editModel.courScheAtomMonday[0] + ',' + this.editModel.courScheAtomMonday[1]
      //   console.log(objIds)
      //   this.editModel.courScheAtomMonday = objIds
      //   console.log(this.editModel)
      // }
      putAction(this.url.editAtomUrl, this.editModel).then(res => {
        if (res.success) {
          this.visible = false
          let record = {
            id: this.editModel.courseScheduleId
          }
          this.getChildTable(record)
        }
      })
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>